<template>
  <section class="about-section">
    <div class="tabs_bg" style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); height: 870px;">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="section-header text-center mb-5 pt-5">
              <p class="about_line"></p>
              <h2 class="about_h2">关于我们</h2>
              <p class="case_p">ABOUT US</p>
            </div>
            
            <!-- 选项卡导航 -->
            <div class="tabs_btn text-center mb-4">
              <ul class="nav nav-tabs justify-content-center" id="aboutTabs" role="tablist">
                <li class="nav-item" role="presentation">
                  <button 
                    class="nav-link active" 
                    id="about-tab" 
                    data-bs-toggle="tab" 
                    data-bs-target="#about" 
                    type="button" 
                    role="tab" 
                    aria-controls="about" 
                    aria-selected="true"
                  >
                    关于我们
                  </button>
                </li>
                <li class="nav-item" role="presentation">
                  <button 
                    class="nav-link" 
                    id="intro-tab" 
                    data-bs-toggle="tab" 
                    data-bs-target="#intro" 
                    type="button" 
                    role="tab" 
                    aria-controls="intro" 
                    aria-selected="false"
                  >
                    站点简介
                  </button>
                </li>
                <li class="nav-item" role="presentation">
                  <button 
                    class="nav-link" 
                    id="purpose-tab" 
                    data-bs-toggle="tab" 
                    data-bs-target="#purpose" 
                    type="button" 
                    role="tab" 
                    aria-controls="purpose" 
                    aria-selected="false"
                  >
                    成立目的
                  </button>
                </li>
              </ul>
            </div>
            
            <!-- 选项卡内容 -->
            <div class="tab-content" id="aboutTabsContent">
              <!-- 关于我们 -->
              <div 
                class="tab-pane fade show active" 
                id="about" 
                role="tabpanel" 
                aria-labelledby="about-tab"
              >
                <div class="row align-items-center">
                  <div class="col-md-6 mb-4 mb-md-0">
                    <img 
                      :src="require('@/assets/images/20220716/1657971345150650.jpg')" 
                      class="tab_img img-fluid rounded"
                      alt="关于我们"
                      @error="handleImageError"
                    >
                  </div>
                  <div class="col-md-6">
                    <div class="tab_text">
                      <h3 class="tab_h3 mb-4">关于我们</h3>
                      <p class="tab_p">
                        &nbsp;&nbsp;&nbsp;&nbsp;我们是一家流浪动物救助平台，目的是为了使更多流浪的小动物感受到爱和温暖。我们的宗旨是让每一只流浪动物都能得到救助，为更多流浪动物提供一个遮风挡雨的家。我们提倡通过领养来代替买卖，希望能够给更多流浪的动物找到一个爱他的主人和温暖的家。
                      </p>
                      <router-link to="/about" class="btn btn-primary tab_more">
                        查看详细
                      </router-link>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 站点简介 -->
              <div 
                class="tab-pane fade" 
                id="intro" 
                role="tabpanel" 
                aria-labelledby="intro-tab"
              >
                <div class="row align-items-center">
                  <div class="col-md-6 mb-4 mb-md-0">
                    <img 
                      :src="require('@/assets/images/20220716/1657971420709109.jpg')" 
                      class="tab_img img-fluid rounded"
                      alt="站点简介"
                      @error="handleImageError"
                    >
                  </div>
                  <div class="col-md-6">
                    <div class="tab_text">
                      <h3 class="tab_h3 mb-4">站点简介</h3>
                      <p class="tab_p">
                        &nbsp;&nbsp;&nbsp;&nbsp;流浪动物之家建立与2021年，是一个流浪动物救助平台。目前正在积极寻找流浪动物救助中心进行合作，一起救助流浪的动物，为更多的流浪动物提供一个遮风挡雨的家。我们的宗旨是让每一只流浪的动物都能得到救助，使更多流浪的小动物感受到爱和温暖。鼓励关爱生命的人...
                      </p>
                      <router-link to="/about/intro" class="btn btn-primary tab_more">
                        查看详细
                      </router-link>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 成立目的 -->
              <div 
                class="tab-pane fade" 
                id="purpose" 
                role="tabpanel" 
                aria-labelledby="purpose-tab"
              >
                <div class="row align-items-center">
                  <div class="col-md-6 mb-4 mb-md-0">
                    <img 
                      :src="require('@/assets/images/20220716/1657971477270105.jpg')" 
                      class="tab_img img-fluid rounded"
                      alt="成立目的"
                      @error="handleImageError"
                    >
                  </div>
                  <div class="col-md-6">
                    <div class="tab_text">
                      <h3 class="tab_h3 mb-4">成立目的</h3>
                      <p class="tab_p">
                        &nbsp;&nbsp;&nbsp;&nbsp;宣传珍爱生命、倡导保护动物、维护动物的生存权利和不受虐待的权利。改善和提高小动物的生命条件、饲养水平，坚决反对任何虐待、残害动物的行为和思想。普及科学养护知识，传播正确对待弱小生灵的观念，呼吁人们减少抛弃行为，通过领养来代替买卖。
                      </p>
                      <router-link to="/about/purpose" class="btn btn-primary tab_more">
                        查看详细
                      </router-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'AboutSection',
  methods: {
    handleImageError(event) {
      // 如果图片加载失败，显示默认样式
      event.target.style.display = 'none'
      const parent = event.target.parentElement
      if (parent && !parent.querySelector('.about-error-placeholder')) {
        const placeholder = document.createElement('div')
        placeholder.className = 'about-error-placeholder'
        placeholder.style.cssText = 'width:100%;height:300px;background:#f8f9fa;color:#666;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:16px;border:2px dashed #ddd;'
        placeholder.textContent = '图片加载失败'
        parent.appendChild(placeholder)
      }
    }
  }
}
</script>

<style scoped>
.about-section {
  position: relative;
}

.tabs_bg {
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 870px;
}

.tabs_bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1;
}

.container {
  position: relative;
  z-index: 2;
}

.nav-tabs {
  border: none;
  margin-bottom: 2rem;
}

.nav-tabs .nav-link {
  background: white;
  border: 2px solid #04A07B;
  border-radius: 25px;
  color: #04A07B;
  font-weight: 600;
  padding: 10px 25px;
  margin: 0 5px;
  transition: all 0.3s ease;
  border-bottom: 2px solid #04A07B;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
  background: #04A07B;
  color: white;
  border-color: #04A07B;
  transform: translateY(-2px);
}

.tab-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 3rem 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
}

.tab_img {
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.tab_img:hover {
  transform: scale(1.02);
}

.tab_h3 {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1.5rem;
}

.tab_p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #666;
  margin-bottom: 2rem;
  text-align: justify;
}

.tab_more {
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.tab_more:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(4, 160, 123, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tabs_bg {
    height: auto;
    min-height: 600px;
    background-attachment: scroll;
    padding: 3rem 0;
  }
  
  .nav-tabs {
    flex-direction: column;
    align-items: center;
  }
  
  .nav-tabs .nav-link {
    margin: 5px 0;
    width: 200px;
    text-align: center;
  }
  
  .tab-content {
    padding: 2rem 1.5rem;
  }
  
  .tab_h3 {
    font-size: 1.5rem;
  }
  
  .tab_p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

@media (max-width: 576px) {
  .tabs_bg {
    min-height: 500px;
    padding: 2rem 0;
  }
  
  .tab-content {
    padding: 1.5rem 1rem;
  }
  
  .tab_h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  
  .tab_p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
  
  .tab_more {
    padding: 10px 25px;
    font-size: 0.95rem;
  }
}
</style>
